<template>
  <div>
    <div id='container'></div>
  </div>
</template>
<script>

import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  mounted() {
    let map = new AMap.Map('container', {
      zoom: 8,//级别
      center: [116.397428, 39.90923],//中心点坐标
      viewMode: '2D'//使用3D视图
    })


    // 区域覆盖
    let circle = new AMap.Circle({
      center: [116.397428, 39.90923],
      radius: 350, //半径
      borderWeight: 3,
      strokeColor: '#FF33FF',
      strokeOpacity: 0.65,
      strokeWeight: 6,
      fillOpacity: 0.4,
      strokeStyle: 'dashed',
      strokeDasharray: [10, 10],
      // 线样式还支持 'dashed'
      fillColor: '#1791fc',
      zIndex: 50
    })
    circle.setMap(map)

    map.plugin(['AMap.ToolBar'], function() {
      map.addControl(new AMap.ToolBar()) // 工具条控件;范围选择控件
    })
    map.plugin(['AMap.Scale'], function() {
      map.addControl(new AMap.Scale()) // 比例尺条控件
    })
    map.plugin(['AMap.Geolocation'], function() {
      map.addControl(new AMap.Geolocation()) //定位当前位置插件； 用来获取和展示用户主机所在的经纬度位置；
    })
    map.plugin(['AMap.OverView'], function() {
      map.addControl(new AMap.OverView()) //鹰眼插件；在地图右下角显示地图的缩略图
    })
    map.plugin(['AMap.MapType'], function() {
      map.addControl(new AMap.MapType()) //实现默认图层与卫星图、实施交通图层之间切换的控件
    })

    // 添加标记
    let marker = new AMap.Marker({
      position: [116.6, 39.9],
      offset: new AMap.Pixel(-10, -10),
      content: '<div style =\'background-color: aqua;padding:5px;width:130px;font-size:11px;text-align:left\'> ' +
        '<p>设备名称：调度主机</p><p>IP:192.168.52.100</p></div>',
      autoRotation: true
    })
    // 同时设置级别和中心点
    map.setCenterAndZoom([116.6, 39.9], 14)
    console.log('marker:', marker)
    map.add(marker)

    // 缩放地图到合适的视野级别
    map.setFitView([circle])
  }
}
</script>
<style scoped>
#container {
  width: 90%;
  height: 550px;
  margin: 0 auto;
}
</style>
